<template>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="60%">
        <ul>
            <li>1、运单</li>
            <li>2、索赔函</li>
            <li>3、购销合同及发票</li>
            <li>4、双港过磅单</li>
            <li>5、现场照片</li>
        </ul>
        <el-form :model="form" class="viewOrExamine" ref="form" label-width="90px">
            <el-form-item label="赔付额" required>
                <el-input v-model="form.lossMoney" placeholder="请输入赔付额"></el-input>
            </el-form-item>
            <el-form-item label="上传图片">
                <!-- <el-upload :headers="headers" multiple :auto-upload="true" action="/file/upload"
                    :http-request="uploadFile" :before-upload="beforeUpload" :show-file-list="false">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload> -->
                <el-upload :headers="headers" :auto-upload="true" :show-file-list="false" action="/file/upload"
                    :http-request="uploadFile" :before-upload="beforeUpload" drag>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>
            </el-form-item>
        </el-form>
        <div style="margin-left:90px">
            <div v-for="(item, index) in fileList" :key="index"
                style="display:inline-block; position:relative; margin-right:10px">
                <el-image style="width: 100px; height: 100px; " :src="item" :preview-src-list="fileList">
                </el-image>
                <div @click="delImg(index)" style="position:absolute; top:-10px; right:-10px; cursor:pointer">
                    <i style="color:red; font-size:18px" class="el-icon-error"></i>
                </div>
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="returnPolicy">确定</el-button>
            <el-button @click="close">关闭</el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            fileList: [],
            headers: { "Content-Type": "multipart/form-data" },
            insureUrl: '',
            title: "上传文件/赔付",
            dialogFormVisible: false,
            form: {
                lossMoney: ''
            },
            row: {},
            file: null,

        };
    },
    methods: {
        delImg(index) {
            this.fileList = this.fileList.filter((item, ind) => index !== ind)
        },
        close() {
            this.dialogFormVisible = false
        },
        beforeUpload(file) {
            console.log(file, 'file')
            this.file = file;
            if (
                file.type !== "image/jpg" && file.type !== "image/jpeg" && file.type !== "image/png"
            ) {
                this.$message.warning("请上传图片");
                return false;
            }
            return true;
        },
        uploadFile() {
            const headers = {
                "Content-Type": "multipart/form-data",
            };
            const formData = new FormData();
            formData.append("file", this.file);
            this.$post("/file/upload", formData, headers).then((res) => {
                if (res.code == 200) {
                    this.fileList.push(res.data)
                }
            });
        },
        returnPolicy() {
            if (!this.form.lossMoney) {
                this.$message.error('请填写赔付额')
                return
            }
            if (!/^[1-9]\d*$/.test(this.form.lossMoney)) {
                this.$message.error('赔付额请输入大于0的数字')
                return
            }
            if (this.fileList.length < 5) {
                this.$message.error('请至少上传5张图片')
                return
            }

            const params = {
                orderNum: this.row.orderNum,
                lossFiles: this.fileList.join(';'),
                lossMoney: this.form.lossMoney,
            }
            this.$post(`/warranty/insure/upInfo`, params).then(res => {
                if (res && res.code == 200) {
                    this.$message.success('操作成功') // 成功提示信息
                    this.dialogFormVisible = false
                    this.$emit('initTable')
                }
            });
        }
    }
};

</script>
<style scoped lang="less"></style>